<!DOCTYPE html>
    <html>
        <head>
            <title>Bootstrap Tables</title>
            <meta charset="UTF-8">
            
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        </head>
        <body>
            <div>
                <table border="1">
                    <thead>
                        <tr>
                            <th>Index</th>
                            <th>City</th>
                            <th>State</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mumbai</td>
                            <td>Maharashtra</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>indore</td>
                            <td>MP</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Pune</td>
                            <td>Maharashtra</td>
                        </tr>
                    </tbody>
                </table>    
            </div>
            
            <br><br>
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Index</th>
                            <th>City</th>
                            <th>State</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="warning">
                            <td>1</td>
                            <td>Mumbai</td>
                            <td>Maharashtra</td>
                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>indore</td>
                            <td>MP</td>
                        </tr>
                        <tr class="success">
                            <td>3</td>
                            <td>Pune</td>
                            <td>Maharashtra</td>
                        </tr>
                    </tbody>
                </table>    
            </div>
            
            <br><br>
            <div>
                <table class="table table-bordered table-responsive table-condensed table-hover">
                    <thead>
                        <tr>
                            <th>Index</th>
                            <th>City</th>
                            <th>State</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="warning">
                            <td>1</td>
                            <td>Mumbai</td>
                            <td>Maharashtra</td>
                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>indore</td>
                            <td>MP</td>
                        </tr>
                        <tr class="success">
                            <td>3</td>
                            <td>Pune</td>
                            <td>Maharashtra</td>
                        </tr>
                    </tbody>
                </table>    
            </div>
        </body>
    </html>